<template>
	<div style="z-index: 999;"
		:class="{ header: ($route.meta.title == '首页'), connHeader: ($route.meta.title == '合作'), news: ($route.meta.title == '新闻' || '下载'), bgcWhite: ($route.meta.title == '愿景' || '产品') }">
		<div class="container box">
			<div class="row d-flex justify-content-between align-items-center">
				<div class="col-lg-2 col-6">
					<div class=" d-flex">
						<img class="navbar-brand" style="width: 90%;"
							src="https://www.fluxmq.com/static/img/logo1.90ade0fa.svg" alt="">
						<img class="navbar-brand   logoTwo d-block d-sm-none" style="width: 90%;"
							src="https://www.fluxmq.com/static/img/header-title.ed71ee1d.svg" alt="">
						<img class="navbar-brand   logoTwo d-none d-sm-block"
							src="https://www.fluxmq.com/static/img/header-title.ed71ee1d.svg" alt="">
					</div>
				</div>
				<div class="col-lg-7 col-3">
					<nav class="navbar  navbar-expand-lg navbar-light main">
						<com-router></com-router>
						<button class="navbar-toggler" @click="handleSelect">
							<span class="navbar-toggler-icon"></span>
						</button>
					</nav>
				</div>
			</div>
		</div>
		<div class="container" v-if="$route.meta.title == '首页'" style="height: 680px;padding-top: 100px;">
			<div class="row d-flex align-items-center">
				<div class=" col-sm col_box ">
					<h1 class="text-left col_text pb-3">为你打造专属的</h1>
					<h1 class="col_text pb-3">企业数字化基座</h1>
					<div class="text-left pb-3">海量设备接入不再是一次技术挑战，而是企业增长的资产</div>
					<div class="btn_cont">
						免费获取
					</div>
				</div>
				<div class="col-sm">
					<img style="width: 100%;" src="https://www.fluxmq.com/static/img/digital-base-1.715a3ebd.svg"
						alt="">
				</div>
			</div>

		</div>
		<div class="container d-felx" v-if="$route.meta.title == '合作'" style=" padding: 7% 0;">
			<h2 class="col-12">物联核心组件，助你拥抱数字化未来</h2>
			<div class="col-12  text-light d-flex justify-content-center" style="margin-top: 50px">
				<a style="color: white;background: linear-gradient(100deg, #124cff, #43daff 100%, #43daff 0);
    box-shadow: 0 3rem 18rem 0 rgba(37,130,255,.38);padding: 13px 40px;border-radius: 40px;"
					href="http://demo.fluxmq.com/index.html#/login?redirect=%2Fdashboard%2Foverview"
					target="_blank">免费试用</a>
			</div>
		</div>
		<div class="div d-sm-none d-block" v-if="isSelectShow"
			style="position: absolute;z-index: 9999;right: 20px;top: 10%;border-radius: 20px;">
			<ul class="list-group list-group-flush" style="background-color: #fff;border-radius: 20px;">
				<li class="list-group-item" v-for="item in   routerList  " v-if="item.isSmShow"
					@click="setActiveRoute(item.path)">
					<router-link class="p-0" :to="item.path" :class="{ 'active-route': activeRot === item.path }">{{
			item.routerName
		}}</router-link>

				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import ComRouter from './ComRouter.vue'
export default {
	components: {
		ComRouter
	},
	data() {
		return {
			isSelectShow: false,
			activeRot: '/#/',
			routerList: [
				{ path: '/#/', routerName: '首页', isSmShow: true },
				{ path: '/document', routerName: '文档', isSmShow: true },
				{ path: '/news', routerName: '新闻', isSmShow: true },
				{ path: '/download', routerName: '下载', isSmShow: true },
				{ path: '/vision', routerName: '愿景', isSmShow: true },
				{ path: '/product', routerName: '产品', isSmShow: false },
				{ path: '/cooperation', routerName: '合作', isSmShow: false },
			],
		}
	},
	methods: {
		handleSelect() {
			this.isSelectShow = !this.isSelectShow
		},
		setActiveRoute(path) {
			this.activeRot = path;
			this.isSelectShow = !this.isSelectShow
		}
	},
	mounted() {
		console.log(this.$route);
	}
}
</script>

<style lang="scss" scoped>
* {
	padding: 0;
	margin: 0;
}

a {
	color: #000;
}

a:hover {
	text-decoration: none !important;
}

.news {
	background-color: #f5f8fa;
}

.bgcWhite {
	width: 100%;
	background-color: #fff;

}

.active-route {
	color: #1d6bff;
}

.list-group-item {
	border: none;
}

.header {
	font-size: 1.1em;
	background: url(https://www.fluxmq.com/static/img/digital-base-bg.0aa2e5a0.svg);
	background-size: cover;
}

.connHeader {
	// padding: 10% 0;
	background-image: url(https://www.fluxmq.com/static/img/base-bg.375c931f.png);
	background-size: auto 100%;
	background-position: 50% 0;
	background-repeat: no-repeat;
	// height: 200px;
}


.box {
	.logoTwo {
		height: 5rem;
	}
}


.col_box {
	color: #0b1e42;

	.btn_cont {
		width: 150px;
		color: #fff;
		background-image: linear-gradient(100deg, #124cff, #43daff);
		box-shadow: 0 3rem 18rem 0 rgba(37, 130, 255, .38);
		border-radius: 40px;
		padding: 10px 10px;
		text-align: center;
		// 点击去除边框
	}
}
</style>